{% extends 'basic/component.html' %}
{% load static %}

{% block pageTitle %}
notifications page
{% endblock %}


{% block pageHeadExtra %}
    <link href="{% static 'css/accounts/notifications.css' %}" rel="stylesheet">
{% endblock %}


{% block pageBody %}
<div class="container">
    <div class="title">
        <div class="row top">
            <div class="col-md-4">
            </div>
            <div class="col-md-4">
                <div class="self_img">
                    <img src="{{ request.user.get_normal_avatar_uri }}"
                         class="avatar img-circle img-responsive" alt="{{ request.user.username }}">
                </div>
            </div>
            <div class="col-md-4">
            </div>
        </div>
        <div class="row bottom">
            <div class="col-md-4">
            </div>
            <div class="col-md-4">
                <div class="self_name">
                    <p>{{ request.user.username }}</p>
                </div>
            </div>
            <div class="col-md-4">
            </div>
        </div>
    </div>
{#    <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>#}
    <span class="self_span"></span>
    <div class="content">
        <div class="row">
            <div class="col-md-3">
                <ul class="nav nav-pills nav-stacked">
                    <li class="active">
                        <a href="#unread" data-toggle="tab">Unread notifications</a>
                    </li>
                    <li>
                        <a href="#read" data-toggle="tab">Read notifications</a>
                    </li>
                </ul>
            </div>{# col-3 #}
            <div class="col-md-9">
                <div class="profile-content">
                    <div class="tab-content">
                        <div class="tab-pane active" id="unread">
                            <div id="unread-group">
                              <!--待填充通知-->
                            </div>
                            <div class="paginator-wrapper text-center">
                              <ul id="unread-paginator">
                              </ul>
                            </div>
                        </div>

                        <div class="tab-pane" id="read">
                            <div id="read-group">
                              <!--待填充通知-->
                            </div>
                            <div class="paginator-wrapper text-center">
                              <ul id="read-paginator">
                              </ul>
                            </div>
                        </div>{# avatar tab-pane #}
                    </div>{# tab-content #}
                </div>{# profile-content #}
            </div>{# col-9 #}
        </div>{# content row #}
    </div>{# content #}

</div>{# container#}
{% endblock %}


{% block pageFootExtra %}
    <script src="{% static 'js/accounts/notifications.js' %}"></script>
    <script src="{% static 'js/vendor/bootstrap-paginator.js' %}"></script>
{% endblock %}
